<template>
  <div>
    <a-modal
      :visible="visible"
      title="意见反馈"
      cancelText="取消"
      okText="确定"
      width="60%"
      @ok="submit"
      @cancel="cancel"
    >
      <a-form
        ref="formRef"
        :model="{}"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="用户名">
          <div>{{state.data.stuName}}</div>
        </a-form-item>
        <a-form-item label="联系方式">
          <div>{{state.data.phone}}</div>
        </a-form-item>
        <a-form-item label="提交时间">
          <div>{{state.data.createTime}}</div>
        </a-form-item>
        <a-form-item label="反馈类型">
          <div>{{state.data.backType}}</div>
        </a-form-item>
        <a-form-item label="意见内容">
          <div style="padding-top: 7px">{{state.data.contentDetail}}</div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { reactive, ref, onMounted } from "vue";
import { details } from "@/api/module/student/feedback";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import dictEnum from "@/const/dict";
// import moment from 'moment'

export default {
  name: "detail",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    itemId: [String, Number]
  },
  setup(props, content) {
    const state = reactive({
      data: {}
    });
    const formRef = ref()
    const submit = () => {
      content.emit("close", 'visiable');
    };
    const cancel = () => {
      content.emit("close", 'visiable');
    };

    const getDetail = (id) => {
      if (!id) return;
      details(id).then(res => {
        if (res.isOk) {
          state.data = res.data
        }
      })
    }
    getDetail(props.itemId)

    const dictLists = reactive({
      data: {}
    })
    onMounted(async () => {
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.BACK_TYPE,
      ]);
      const obj = dictLists.data[dictEnum.BACK_TYPE].find(v => v.value == state.data.backType)
      state.data.backType = obj ? obj.label : '-'
    })
    return {
      state,
      cancel,
      submit,
      formRef,
      dictEnum,
      dictLists
    };
  },
};
</script>

<style scoped>
.tree-transfer .ant-transfer-list:first-child {
  width: 50%;
  flex: none;
}
</style>
